<template>
  <el-card class="box-card231">
    <template #header>
      <div class="card-header">
        <el-icon color="#E6A23C"><DataLine /></el-icon>
        &nbsp;
        <span style="color: #e6a23c">设计进度</span>
        <span v-if='authCode>40' style="color: red;font-weight:bold;font-size:14px">（项目总进度）</span>
        <span v-if='authCode<=30' style="color: red;font-weight:bold;font-size:14px">（个人总进度）</span>
      </div>
    </template>
    <div v-if='authCode!=40'   style="width:100%;height: 
   150px;" ref='chartRef'></div>
   <div style="
       color: rgb(204, 204, 204);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 150px;" v-else>
    审定人无法查看设计进度
   </div>
 
  </el-card>
</template>

<script setup>
import { DataLine } from "@element-plus/icons-vue";
import { onMounted, ref,watch } from "vue";
import { getRuleTable } from "../../../api/project";
import * as echarts from "echarts";
let tableData = ref([]);
let chartRef = ref(null)
let props = defineProps(['tableDataFormatter'])
let getTableData = async (data) => {
  let res = await getRuleTable(data);
  tableData.value = res;
};

let  myCharts
let username =ref('')

let options = ref({
 
 tooltip: {
   trigger: 'item',
   formatter:(data)=>{
       
      return `
      <div>
        <div>
        ${data.seriesName}
          </div>
        
        <div>
      ${data.marker}
      <span>  ${data.value} / ${authCode.value>40?(props.tableDataFormatter.length) : (
        data.name == '设计'? props.tableDataFormatter.filter(item=> item.equip_designer == username.value).length : 
        data.name == '校核'?  props.tableDataFormatter.filter(item=> item.equip_checker == username.value  ).length :  
        data.name == '审核'? props.tableDataFormatter.filter(item=> item.auditor == username.value  ).length : ''
      ) }</span>
        </div>
        </div>
      `
   }
 },
 legend: {
   orient: 'vertical',
   top: '15%',
   right: '10%'
 },
 series: [
   {
     name: '当前/总台数',
     type: 'pie',
     radius: ['40%', '70%'],

     center: ['30%', '50%'], 
     avoidLabelOverlap: true,
     itemStyle: {
       borderRadius: 10,
       borderColor: '#fff',
       borderWidth: 2
     },
     label: {
       show: false,
       position: 'center'
     },
     emphasis: {
       label: {
         show: false,
         fontSize: 40,
         fontWeight: 'bold'
       }
     },
     labelLine: {
       show: true
     },
     data: [
       { value: 1048, name: 'Search Engine' },
       { value: 735, name: 'Direct' },
       { value: 580, name: 'Email' },
       { value: 484, name: 'Union Ads' },
       { value: 300, name: 'Video Ads' }
     ],
     emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
   }
 ]
})

let authCode = ref(0)
onMounted(() => {
  username.value = JSON.parse(localStorage.getItem("userMessage")).user_name
  authCode.value = Number(localStorage.getItem("authCode"));
  myCharts = echarts.init(chartRef.value)

  
  getTableData({});
});



watch(props,()=>{
   
  if(authCode.value>30){
    let arr  = []
   for (let i =0 ;i<=3;i++){
    arr.push({
      value : (props.tableDataFormatter.filter(item=>Number(item.equip_check)==(i * 10))).length,
      name: i==0?'设计':i==1?'校核':i==2?'审核':'已完成'
    })
  }
  
  options.value.series[0].data =  arr
  }else{
   let arr = []
    let equipData_equip_designer= props.tableDataFormatter.filter(item=> item.equip_designer == username.value  )
    let equipData_equip_checker = props.tableDataFormatter.filter(item=> item.equip_checker == username.value  )
    let equipData_auditor = props.tableDataFormatter.filter(item=> item.auditor == username.value  )
    if(equipData_equip_designer.length>0){
      arr.push({
      value : (equipData_equip_designer.filter(item=>Number(item.equip_check)>0)).length,
      name: '设计'
    })
    }
    if(equipData_equip_checker.length>0){
          arr.push({
      value : (equipData_equip_checker.filter(item=>Number(item.equip_check)>10)).length,
      name: '校核'
    })
    }
    if(equipData_auditor.length>0){
      arr.push({
      value : (equipData_auditor.filter(item=>Number(item.equip_check)>20)).length,
      name: '审核'
    })
    }
    options.value.series[0].data =  arr
   
  }

  myCharts?.setOption(options.value);
 


  myCharts.on('mousemove', (params)=> {
	 
   if(authCode.value>30){
    options.value.series[0].name = `${params.name}/总台数`
    myCharts?.setOption(options.value);
   }else{
    switch(params.name){
      case '设计':
        options.value.series[0].name = `设计已完成/设计总数`
        break;
      case '校核':
        options.value.series[0].name = `校核已完成/校核总数`
        break;
      case '审核':
        options.value.series[0].name = `审核已完成/审核总数`
        break;
    }

    myCharts?.setOption(options.value);
   }
 


});


})

</script>

<style scoped lang="scss">
.hober {
  cursor: pointer;
}
.hober:hover {
  color: rgb(34, 171, 249);
  text-decoration: underline;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 17px;
  span {
    // background-color: aqua;

    border-radius: 4px;

    font-weight: 600;
  }
}

.project-info {
  display: flex;
  font-size: 14px;

  flex-direction: column;
  .project-info-item {
    margin-bottom: 10px;
  }
}

.box-card231 {
  width: 19%;
  ::v-deep(.el-card__body) {
    padding: 5px;
  }
}
</style>
